<template>
  <div>
    <!-- 问题文本编辑 -->
    <el-form-item label="问题文本">
      <el-input v-model="question.text" placeholder="请输入问题文本" />
    </el-form-item>

    <!-- 问题选项编辑 -->
    <el-form-item label="问题选项">
      <div v-for="(option, index) in sortedOptions" :key="option.optionId" class="option-item">
        <el-input
          v-model="option.optionText"
          placeholder="请输入选项"
          :rules="[{ required: true, message: '选项文本不能为空', trigger: 'blur' }]"
        />
        <!-- 删除按钮 -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="removeOption(option.optionId)"
        >删除</el-button>
      </div>
      <el-button @click="addOption">添加选项</el-button>
    </el-form-item>

    <!-- 单选答案 -->
<!--    <el-form-item label="已选答案">-->
<!--      <el-radio-group v-model="question.selectedOption">-->
<!--        <el-radio v-for="(option, index) in sortedOptions" :key="option.optionId" :label="option.optionId">-->
<!--          {{ option.optionText }}-->
<!--        </el-radio>-->
<!--      </el-radio-group>-->
<!--    </el-form-item>-->
  </div>
</template>

<script>
export default {
  props: {
    question: Object, // 接收问题数据
  },
  created() {
    // 初始化选项数据，确保每个选项包含所需字段
    if (!this.question.options) {
      this.$set(this.question, 'options', []);
    }
    this.question.options = this.question.options.map((option, index) => ({
      questionId: this.question.id,
      optionId: option.optionId || null, // 使用时间戳加上索引保证唯一性
      optionText: option.optionText || option, // 如果选项是空字符串，则初始化为空文本
      optionSort: index + 1, // 给每个选项排序
    }));
  },
  computed: {
    // 对选项根据 optionSort 自动排序
    sortedOptions() {
      return this.question.options.slice().sort((a, b) => a.optionSort - b.optionSort);
    }
  },
  methods: {
    // 添加新选项
    addOption() {
      const newOption = {
        questionId: this.question.id,
        optionId: null, // 使用时间戳作为唯一ID
        optionText: '',  // 初始化为空字符串
        optionSort: this.question.options.length + 1 // 新选项的排序从当前数量+1开始
      };
      this.question.options.push(newOption);
    },

    // 删除选项
    removeOption(optionId) {
      this.question.options = this.question.options.filter(option => option.optionId !== optionId);
    }
  },
};
</script>

<style scoped>
.option-item {
  margin-bottom: 10px;
}

.el-button[type="danger"] {
  margin-left: 10px;
}
</style>
